<template>
  <div id="chart" style="width: 100%; height: 300px;" />
</template>

<script>
import resize from './mixins/resize'

export default {
  mixins: [resize],

  props: {
    data: {},

    // id: {
    //   type: String,
    //   default: 'chart',
    // },
    // width: {
    //   type: String,
    //   default: '200px',
    // },
    // height: {
    //   type: String,
    //   default: '200px',
    // },
  },
  data() {
    return {
      chart: null,
      list: [],
    }
  },
  mounted() {
    console.log(this.data)
    let myChart = this.$echarts.init(document.getElementById('chart'))
    let option = {
      series: {
        type: 'sankey',
        layout: 'none',
        emphasis: {
          focus: 'adjacency',
        },
        data: this.data.nodes,

        links: this.data.links,
        levels: [
          {
            depth: 0,
            itemStyle: {
              color: '#fbb4ae',
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6,
            },
          },
          {
            depth: 1,
            itemStyle: {
              color: '#b3cde3',
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6,
            },
          },
          {
            depth: 2,
            itemStyle: {
              color: '#ccebc5',
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6,
            },
          },
          {
            depth: 3,
            itemStyle: {
              color: '#decbe4',
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6,
            },
          },
        ],
        lineStyle: {
          curveness: 0.5,
        },
        // data: [
        //   {
        //     name: 'b',
        //   },
        //   {
        //     name: 'a',
        //   },
        //   {
        //     name: 'a1',
        //   },
        //   {
        //     name: 'a2',
        //   },
        //   {
        //     name: 'b1',
        //   },
        //   {
        //     name: 'c',
        //   },
        // ],
        // links: [
        //   {
        //     source: 'a',
        //     target: 'a1',
        //     value: 3,
        //   },
        //   {
        //     source: 'a',
        //     target: 'a2',
        //     value: 3,
        //   },
        //   {
        //     source: 'b',
        //     target: 'b1',
        //     value: 1,
        //   },
        //   {
        //     source: 'a',
        //     target: 'b1',
        //     value: 3,
        //   },
        //   {
        //     source: 'b1',
        //     target: 'a1',
        //     value: 1,
        //   },
        //   {
        //     source: 'b1',
        //     target: 'c',
        //     value: 2,
        //   },
        // ],
      },
    }
    myChart.setOption(option)
  },
  beforeDestroy() {
    if (!this.chart) {
      return false
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // initChart() {
    //   console.log(this.echarts)
    //   var chartContainer = document.getElementById('chart')
    //   this.chart = this.$echarts.init(chartContainer)
    //   this.tableDataList = [
    //     { subjectArea: 'DataCenter', mappingName: 'm_ts_test_table_inc', sourceTable: 'src_test_table', targetTable: 'ts_test_table' },
    //     { subjectArea: 'DataCenter', mappingName: 'm_ts_test_table_inc', sourceTable: 'ts_test_table', targetTable: 'th_test_table' },
    //     { subjectArea: 'DataCenter', mappingName: 'm_ts_test_table_inc', sourceTable: 'ts_test_table', targetTable: 'ti_test_table' },
    //     { subjectArea: 'DataCenter', mappingName: 'm_ods_test_table_inc', sourceTable: 'ti_test_table', targetTable: 't_test_table' },
    //   ]
    //   let data = { nodes: [], links: [] }
    //   const colors = ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4']
    //   const nodes = []
    //   const links = []
    //   this.tableDataList.forEach((item) => {
    //     nodes.push({
    //       name: item.sourceTable,
    //       itemStyle: {
    //         normal: {
    //           color: colors[Math.floor(Math.random() * colors.length)],
    //         },
    //       },
    //     })
    //     nodes.push({
    //       name: item.targetTable,
    //       itemStyle: {
    //         normal: {
    //           color: colors[Math.floor(Math.random() * colors.length)],
    //         },
    //       },
    //     })
    //     links.push({
    //       source: item.sourceTable,
    //       target: item.targetTable,
    //       value: item.mappingName.length,
    //       mapping: item.mappingName,
    //     })
    //   })
    //   this.chart.clear()
    //   this.chart.setOption({
    //     title: {
    //       text: '血缘流向',
    //     },
    //     tooltip: {
    //       trigger: 'item',
    //       triggerOn: 'mousemove',
    //       formatter: function (x) {
    //         return x.data.mapping
    //       },
    //     },
    //     animation: false,
    //     series: [
    //       {
    //         type: 'sankey',
    //         focusNodeAdjacency: 'allEdges',
    //         nodeAlign: 'left',
    //         data: data.nodes,
    //         links: data.links,
    //         lineStyle: {
    //           color: 'source',
    //           curveness: 0.5,
    //         },
    //       },
    //     ],
    //   })
    // },
  },
}
</script>
